<template>
  <div>
    <Modal
      v-model="isShowModal"
      @on-cancel="hide()"
      :mask-closable="false"
      width="90vw"
    >
      <Row class="content-box">
        <Col class="leftCon" span="14">
          <h3 style="text-align: center;">工厂反馈</h3>
          <div class="headCon">
            <Tag style="float: left;" color="error">异常订单</Tag>
            <span class="text">订单编号：{{ orderData.orderCode || '' }}</span>
            <span class="text">
              取件物流单号：{{ orderData.sendWayBillNo || '' }}
            </span>
          </div>
          <Card>
            <p slot="title">
              <span style="color: blue;">数量异常</span>
              （下单数量{{ orderData.orderNum || '' }}，登记数量{{
                orderData.registerNum || ''
              }}）
            </p>
            <div v-if="orderData.warnState == 0">正常</div>
            <div v-else>
              <Button type="primary" ghost>
                {{ orderData.warnState == 1 ? '少衣' : '多衣' }}
              </Button>
              <span style="margin-left: 10px;">
                加价
                <Input
                  style="width: 50px;"
                  :value="orderData.addMoney"
                  :disabled="true"
                ></Input>
              </span>
            </div>
          </Card>
          <Card>
            <p slot="title">
              <span style="color: blue;">衣物异常</span>
            </p>
            <Table
              :columns="clothingColums"
              :data="warnClothesList"
              size="small"
              :max-height="300"
            >
              <template slot-scope="{ row, index }" slot="clothes">
                <p>{{ row.clothesName }}|{{ row.color }}</p>
              </template>
              <template slot-scope="{ row, index }" slot="picture">
                <img
                  @click="picDetail(row.imgUrls)"
                  style="width: 30px;margin-left: 10px;"
                  v-for="item in row.imgUrls"
                  :src="orderData.imgBaseUrl + item"
                  :key="item"
                  alt=""
                />
              </template>
              <template slot-scope="{ row, index }" slot="content">
                <Tag color="red" v-if="row.warnState == 1" >不清洗</Tag>
                <Tag
                  style="float: left;"
                  color="primary"
                  v-for="item in row.warnNote.split(',')"
                  v-show="item != 0"
                  :key="item"
                >
                  {{ item }}
                </Tag>
                <p
                  style="float: left;margin-left: 10px;margin-top: 5px;"
                  v-if="row.addMoney != 0"
                >
                  加价{{ row.addMoney }}元
                </p>
              </template>
            </Table>
          </Card>
          <Card>
            <p slot="title">
              <span style="color: blue;">补充说明</span>
            </p>
            <Card>
              <ul class="listCon">
                <li style="width: 100%;">
                  <p>
                    <span>{{ orderData.warnNote || '' }}</span>
                  </p>
                </li>
              </ul>
            </Card>
          </Card>
        </Col>
        <Col span="10" style="padding: 10px;">
          <h3 style="text-align: center;">运营处理</h3>

          <Card>
            <p slot="title">
              <span>数量异常</span>
              （下单数量{{ orderData.orderNum || '' }}，登记数量{{
                orderData.registerNum || ''
              }}）
            </p>
            <div v-if="orderData.warnState == 0">正常</div>
            <div v-else>
              <RadioGroup @on-change="isCleanoutChange" v-model="isCleanout">
                <Radio :disabled="!canClick" :label="0">
                  <span>不清洗</span>
                </Radio>
                <Radio :disabled="!canClick" :label="2">
                  <span>加价清洗</span>
                </Radio>
              </RadioGroup>
              <span style="margin-left: 10px;">
                加价
                <Input
                  style="width: 50px;"
                  :value="orderData.addMoney"
                  :disabled="true"
                ></Input>
              </span>
            </div>
          </Card>
          <Card>
            <p slot="title">
              <span>衣物异常</span>
            </p>
            <Table
              :columns="operationColums"
              :data="operationColumsData"
              size="small"
              :max-height="300"
            >
              <template slot-scope="{ row, index }" slot="index">
                <p>{{ index + 1 }}</p>
              </template>
              <template slot-scope="{ row, index }" slot="buttonsGroup">
                <RadioGroup
                  @on-change="rowChang(row.washType, index)"
                  v-model="row.washType"
                  size="small"
                >
                  <Radio :class="canClick ? '' : 'disClick'" :label="1">
                    正常清洗
                  </Radio>
                  <Radio :class="canClick ? '' : 'disClick'" :label="0">
                    不清洗
                  </Radio>
                  <Radio :class="canClick ? '' : 'disClick'" :label="2">
                    加价清洗
                  </Radio>
                </RadioGroup>
              </template>
              <template slot-scope="{ row, index }" slot="remark">
                <Input
                  style="margin: 5px;"
                  :class="canClick ? '' : 'disClick'"
                  v-model="row.dealNote"
                  @on-change="textChange(row.dealNote, index)"
                  type="textarea"
                  placeholder="请输入备注！"
                />
              </template>
            </Table>
          </Card>
          <Card>
            <p slot="title">
              <span>补充说明</span>
            </p>
            <Input v-model="dealNote" type="textarea" placeholder="请输入！" />
          </Card>
        </Col>
      </Row>
      <!-- 重写对话框底部按钮 -->
      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button @click="confirm" type="primary">确定</Button>
      </div>
      <Drawer
        class-name="logisticsDrawer"
        width="500px"
        :title="logisticsTitle"
        v-model="logisticsFlag"
      >
        <Timeline>
          <TimelineItem v-for="item in logisticsTimeLine" :key="item.acceptTime">
            <p class="time">{{ item.acceptTime }}</p>
            <p class="content">{{ item.remark }}</p>
            <p class="content">{{ item.acceptAddress }}</p>
          </TimelineItem>
        </Timeline>
      </Drawer>
    </Modal>
    <ImgViewer ref="imgViewerRef" />
    <Modal
      v-model="picFlag"
      :title="'查看图片'"
      :mask-closable="true"
      width="950"
    >
      <img style="width: 100% ;" :src="imgUrl" alt="" />

      <!-- </Carousel> -->
    </Modal>
  </div>
</template>

<script>
// import orderDetail from "../mixin/orderDetail.js";
  import ImgViewer from "@/components/img-viewer/img-viewer.vue";

  export default {
    name: 'order-ope',
    components: {
      ImgViewer
    },  
  // mixins: [orderDetail],
    data() {
      return {
        isCleanout: 2,
        value2: 0,
        dealNote: '',
        isTableLoading: false,
        logisticsFlag: false,
        isShowModal: false,
        loadingBtn: false,
        picFlag: false,
        logisticsTitle: '',
        orderData: {},
        warnClothesList: [],
        logisticsTimeLine: [],
        picList: [],
        goodsSkuInfo: {},
        imgUrl: '',
        title: '订单详情',
        operationColumsData: [],
        canClick: true,
        operationColums: [
          {
            title: '序号',
            width: 60,
            slot: 'index'
          },
          {
            title: '运营处理',
            width: 280,
            slot: 'buttonsGroup'
          },
          {
            title: '备注',
            slot: 'remark'
          }
        ],
        clothingColums: [
          {
            title: '衣物|颜色',
            slot: 'clothes'
          },
          {
            title: '图片',
            slot: 'picture'
          },
          {
            title: '内容',
            slot: 'content'
          }
        ]
      };
    },
    created() {
      // this.orderData = this.orderInfo.data
    },
    methods: {
      isCleanoutChange() {
        //顶部不清洗按钮
        if (this.isCleanout == 0) {
          let obj = JSON.parse(JSON.stringify(this.operationColumsData));
          this.operationColumsData = obj.map(data => {
            data.washType = 0;
            return data;
          });
          console.log(this.operationColumsData);
        }
      },
      rowChang(data, index) {
        this.operationColumsData[index].washType = data;
        // this.operationColumsData[index].
        if (data != 0) {
          this.isCleanout = 2;
        }
      },
      textChange(data, index) {
        this.operationColumsData[index].dealNote = data;
      },

      // 显示模态框
      show(row, flag) {
        this.isShowModal = true;
        this.canClick = flag;
        this.getOrderMallById(row);
      },
      // 查询订单详情
      getOrderMallById(row) {
        this.$Spin.show();
        this.axios
          .get('/orderMall/orderDetail', {
            params: { orderCode: row.mallOrderCode }
          })
          .then(res => {
            this.isShowModal = true;
            // let res  = this.orderInfo
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            // res.data.sendLogistics = res.data.sendLogistics || {};
            // res.data.backLogistics = res.data.backLogistics || {};
            let obj = {
              backDeliveryName:
                res.data?.deliveries?.backDelivery?.deliveryName || '--',
              backWayBillNo:
                res.data?.deliveries?.backDelivery?.wayBillNo || '--',
              backState: res.data?.deliveries?.backDelivery?.state || '--',
              takeDeliveryName:
                res.data?.deliveries?.takeDelivery?.deliveryName || '--',
              takeWayBillNo:
                res.data?.deliveries?.takeDelivery?.wayBillNo || '--',
              takeState: res.data?.deliveries?.takeDelivery?.state || '--'
            };
            this.warnClothesList = [];
            this.operationColumsData = [];
            this.dealNote = res.data.dealNote;
            res.data.clothesList.map(data => {
              //if(data.warnState>0){
              this.warnClothesList.push(data);
              this.operationColumsData.push({
                clothesId: data.clothesId,
                isWash: data.isWash,
                washType: data.washType,
                dealState: data.dealState,
                dealNote: data.dealNote
              });
              // }
            });
            this.orderData = {
              ...res.data,
              ...obj
            };
            console.log(this.orderData.dealState);
            // if (!this.orderInfo.voucher) {
            //   this.orderInfo.voucher = {}
            // }
          })
          .catch(err => {
            debugger;
            this.$Message.error('系统内部错误，请稍后再试！');
          });
      },
      // 关闭模态框
      hide() {
        this.isShowModal = false;
      },
      confirm() {
        let params = {
          orderCode: this.orderData.orderCode, //订单编号
          dealState: 2, //订单异常处理状态  2：处理完成；3：运维标记订单异常
          dealNote: this.dealNote, //处理备注
          clotheses: this.operationColumsData.map(data => {
            data.dealState = 2;
            return data;
          })
        };
        this.axios.post('/orderMall/warnDeal', params).then(res => {
          this.hide();
        });
      },
      // 查看图片
      picDetail(imgList) {
        const list = imgList.map((item) => `${this.orderData.imgBaseUrl}${item}`)
        this.$refs.imgViewerRef.showModal(list)
        // this.picFlag = true;
      },
      seeLogistics(type, wayBillNo) {
        if (wayBillNo == '--') {
          return this.$Message.error('暂无物流信息');
        }
        this.axios
          .get('/orderMall/getDeliveryRouters', {
            params: { wayBillNo: wayBillNo }
          })
          .then(res => {
            this.logisticsTimeLine = res.data.routes;
            this.logisticsFlag = true;
            if (type == 1) {
              //取件物流
              this.logisticsTitle = '取件物流信息';
            } else {
              //送件物流
              this.logisticsTitle = '送件物流信息';
            }
          });
      }
    }
  };
</script>

<style scoped lang="less">
  ::v-deep .ivu-card {
    margin-top: 10px;
  }
  .disClick {
    pointer-events: none;
  }
  .leftCon {
    height: 100%;
    border-right: 10px solid #eee;
    padding: 10px;
    .headCon .text {
      margin-top: 5px;
      margin-left: 10px;
      display: inline-block;
      line-height: 22px;
    }
  }
  /* ::v-deep .ivu-carousel-list{
    width: 100%!important;
    height: 100%!important;
  }
  ::v-deep .ivu-carousel-track{
    width: 100%!important;
    height: 100%!important;
  }
  ::v-deep .ivu-carousel-item{
    width: 100%!important;
    height: 100%!important;
  }
  ::v-deep .ivu-carousel-item img{
    width: 100%;
  } */
  .content-box {
    width: 100%;
    height: 100%;
  }
  ::v-deep .logisticsDrawer {
    z-index: 999999 !important;
  }
  ::v-deep .ivu-modal-body {
    height: calc(100vh - 250px);
    overflow-y: scroll;
  }
  ::v-deep .ivu-modal-body::-webkit-scrollbar {
    width: 1px;
  }
  /deep/.ivu-row {
    margin-bottom: 5px;
  }
  .listCon {
    width: 100%;
    li {
      list-style: none;
      width: 25%;
      height: 30px;
      line-height: 30px;
      display: inline-block;
    }
  }
  .j-order-image {
    display: flex;

    .j-order-image-main {
      width: 130px;
      height: 130px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .j-order-image-info {
      margin-left: 10px;

      .j-order-goods-sku {
        margin-top: 5px;
      }

      .j-order-goods-price {
        margin-top: 5px;
      }

      .j-order-goods-num {
        margin-top: 5px;
      }
    }
  }
</style>
